<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@ include file="/common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>User Management</title>
<link rel="stylesheet" type="text/css" href="${rctx}/default/om-default.css" />
<style type="text/css">
.content-wrapper {
	width: 960px; 
	margin:0 auto 0;
	padding: 10px;
}
.formTb td{
	margin-bottom: 25px;
}	
.textarea_text {
	border: 1px solid #A1B9DF; 
	height: 40px;
	width: 100%;
}
</style>

<script type="text/javascript" src="${rctx}/operamasks-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {	
    $('#grid').omGrid({
        title : '系统用户表',
        dataSource : '${ctx}/auth/role/page?meth=1',
       	width: 560,
        colModel : [ {header : '角色名', name : 'roleName', width : 160, align : 'center'}, 
                     {header : '是否管理员', name : 'isSystem', width: 120, align : 'center', renderer:genderRenderer},
                     {header : '描述', name : 'description', align : 'center', width : 'autoExpand'} ]
    });   
    
    $('input[name=isSystem]').omCombo({          //初始化Combo
        dataSource : [ {text : '是', value : 'true'}, 
                       {text : '否', value : 'false'}],
        width : 150,
        value : 'false',
        editable: false,
    });
    
    $( "#dialog-modal").omDialog({
		autoOpen: false,
		width: 520,
		height: 290,
		modal: true,
		resizable: false
	});
    
    var options = {
            beforeSubmit : showRequest,
            success : showResponse,
            method : 'POST',
            clearForm: true
        };
 	//通过监听form的submit事件，对form进行ajax提交。
    $('#formId').submit(function() {
        if (!$("#formId").valid()) 
            return false;
        $(this).omAjaxSubmit(options);
        return false; //此处必须返回false，阻止常规的form提交。
    });
 	
    $("#mytree1").omTree({
        dataSource : "${ctx}/auth/role/findAllAsTree",
        simpleDataModel: true
    }); 
});
function genderRenderer(value){
    if(value){
        return "启用";
    } else {
        return "停用";
    }
}
function showRequest(formData, jqForm, options) {
    return true;
}

function showResponse(responseText, statusText, xhr, $form) {
	var msg = responseText.error;
	showTopTip(msg);
	if($("#dialog-modal").omDialog('isOpen')) {
		$("#dialog-modal").omDialog('close');
	}
	$('#grid').omGrid('reload');
	$('#mytree1').omTree('refresh');
}
function showModelDialog(){
	$("#dialog-modal").omDialog('open');
}
function showTopTip(content){
    try{
        window.top.$.omMessageTip.show({
            title : '提醒',
            content : content,
            timeout : 5000
        });
    }catch(e){
        alert('提示失败！原因是：顶层页面没有引入提示所需要的js。');
    }
}
function rowToForm(record) {
	for (var p in record) { // 方法 
		if (typeof (record[p]) == " function ") {
			//record[p]();
		} else { // p 为属性名称，obj[p]为对应属性的值 
			$("[name='"+ p + "']", $("#formId")).val(record[p]);
		}
	}
	$("input[name='isSystem']").omCombo('value',record.enabled);
	$("input[name='parentRole.id']").val(record.parentRole.id);
	return true;
}
function deleteUser() {
	
}
function editUser() {
	var s = $('#mytree1').omTree('getSelected');
	if(s.data==null) {showTopTip('请在左下角树中选择一条记录!');return false;}
	if (rowToForm(s.data))
		showModelDialog();
}
function addUser() {
	$("#resetBtn").click();
	$('input[name=isSystem]').omCombo('value','false');
	var record = $('#mytree1').omTree('getSelected');
	if (record == null) {showTopTip('请在角色树种选择一条记录！');return false;}
	$("input[name='parentRole.id']").val(record.data.id);
	showModelDialog();
}
</script>
</head>
<body style="background-color: #2A2B2F;;margin: 0px">
<div id="back1" style="background-color: #00BFFF;width: 100%">
<div class="content-wrapper">
	<div id="btnBar" style="margin: 15px">
		<button id="addBtn" onclick="javascript: addUser();">添加</button>
		<button id="editBtn" onclick="javascript: editUser();">修改</button>
		<button id="deleteBtn" onclick="javascript: deleteUser();">删除</button>
	</div>	
    <div id="dialog-modal" title="维护数据">
    	<form id="formId" action="${ctx}/auth/role/save">
    	<input type="hidden" name="id">
    	<input type="hidden" name="parentRole.id">
    	<table id="formTb" class="formTb" cellspacing="15px">
    	<tr>
    	<td>角色名</td>
    	<td><input type="text" name="roleName"></td>
    	<td>是否管理员</td>
    	<td><input type="text" name="isSystem"></td>  
    	</tr>
    	<tr>
    	<td>描述</td>
    	<td colspan="3"><label>
	      	<textarea name="description" class="textarea_text"></textarea></label></td>    	 
    	</tr>
    	<tr>
    		<td colspan="4" style="text-align: center;">
    			<button id="saveBtn" type="submit">保存</button>
    			<button id="resetBtn" type="reset">重置</button>
    		</td>
    	</tr>
    	</table>
    	</form>
    </div>
</div>
</div>
<div id="back1" style="background-color: #FFFFFF;width: 100%">
<div class="content-wrapper">
	<table>
		<tr>
		<td width="360px" style="vertical-align: text-top;"><div><ul id="mytree1"></ul></div><td>
		<td width="560px"><div><table id="grid"></table></div><td>
		</tr>
	</table>	
</div>
</div>
</body>
</html>